<template>
  <div id="app">
    <z-button type="primary" 
    disabled 
    >primary</z-button>
    <z-button type="danger"
    round
    size="small"
    @click="handleClick"
    >danger</z-button>
    <z-button type="warning" size="mini">warning</z-button>
    <z-button type="success">success</z-button>
    <!-- icon图标 -->
     <z-icon name="chahao" @click="handleClick"></z-icon>
    <z-input placeholder="请输入内容" v-model="msg" type="textarea"
    size="medium"
    ></z-input>
    <z-input placeholder="请输入内容"
     v-model="msg" 
     type="text"
     size="small"
     center
     clearable
    >

    <template slot="prepend">
        http://
    </template>
    </z-input>
    <!-- {{msg}} -->
    <!-- <z-index v-model="message"></z-index> -->
    <z-input>
      <template slot="prepend">https://</template>
    </z-input>
    <z-input
      placeholder="网址"
      v-model="msg"
      size="medium"
      clearable
    >
      <template slot="append">.com</template>
    </z-input>
    {{ msg }}
    <z-inputnumber v-model="count"></z-inputnumber>

  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import zButton from './components/button/zButton.vue';
// import zIndex from './components/index.vue';
export default {
 name: 'App',
 
 data() {
  return {
    msg:'111',
    message:'我是messafe',
    count:5
  }
 },
 methods:{
  handleClick() {
    console.log(111111);
  }
 }
}
</script>

<style>
  #app {
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-items: center;
  }
</style>
